<div class="field-wrapper">
    <div class="content">
        <div class="top ">
            文档资料
        </div>

        <div class="body">
            <div class="file-list" *ngFor="let docItem of docList; let index  = index">
                <div class="file-list-item">
                    <div class="t-content">
                        <div class="no a-c" [ngStyle]="{'background-color': docItem.color}">{{index+1}}</div>
                        <div class="file-name a-c">
                            {{docItem.name}}
                        </div>
                        <nz-divider nzType="vertical" class="sp-line"></nz-divider>
                        <div class="file-content a-c">
                            <span>文档内容</span>
                            <div class="spacer"></div>
                            <a nz-button nzType="link" (click)="extend(docItem)">
                                {{docItem.isExtend?'收起':'展开'}}
                                <i class="iconfont icon-arrow-down-s-fill" *ngIf="!docItem.isExtend"></i>
                                <i class="iconfont icon-arrow-up-s-fill" *ngIf="docItem.isExtend"></i>
                            </a>
                        </div>
                    </div>
                    <div class="explan" *ngIf="docItem.isExtend">
                        <div class="c-name">
                            {{docItem.component.name}}
                        </div>
                        <div class="f-list">

                            <div class="file-item" *ngFor="let fsItem of docItem.fileList">
                                <div class="img-item" *ngIf="fsItem">
                                    <img [src]="fsItem.url" nz-popover [nzPopoverTitle]=""
                                        [nzPopoverContent]="contentTemplate"
                                        *ngIf="fsItem.fileType.indexOf('image')> -1">
                                    <ng-template #contentTemplate>
                                        <div style="max-height: 600px; max-width: 600px;">
                                            <img [src]="fsItem.url" style="width: 100%; height: 100%;">
                                        </div>
                                    </ng-template>
                                    <div class="file-type-base"
                                        [ngClass]="{'file-type-pdf': fsItem.fileType.indexOf('pdf')> -1 , 'file-type-word': fsItem.fileType.indexOf('word')> -1 , 'file-type-excel': fsItem.fileType.indexOf('sheet')> -1 , 'file-type-zip': fsItem.fileType.indexOf('zip')> -1 }"
                                        *ngIf="fsItem.fileType.indexOf('image') < 0" (click)="download(fsItem.url)">
                                        <i class="iconfont "
                                            [ngClass]="{'icon-file-pdf-line': fsItem.fileType.indexOf('pdf')> -1, 'icon-file-excel-line': fsItem.fileType.indexOf('sheet')> -1, 'icon-file-word-line': fsItem.fileType.indexOf('word')> -1, 'icon-folder-zip-line': fsItem.fileType.indexOf('zip')> -1}"></i>
                                    </div>
                                </div>
                                <span nz-tooltip [nzTooltipTitle]="fsItem.name">{{fsItem.shortName}}</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="bottom ">
            <div class="sub-txt">注：以上序号表示文档生成的顺序</div>
            <div class="spacer"></div>
            <button nz-button nzType="primary" style="line-height: 1;" (click)="makePDF()">
                生成PDF
                | &nbsp;
                <i class="iconfont icon-download-2-line"></i>
            </button>
        </div>
    </div>
</div>